<template>
    <el-table
        :data="tableData"
        v-bind="tableConfig"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="Loading..."
        element-loading-background="rgba(122, 122, 122, 0.8)"
        tooltip-effect="dark"
        ref="tableRef"
        :tooltip-options="{
            effect: 'dark',
            placement: 'top',
            showArrow: true
        }"
    >
        <el-table-column
            v-if="tableConfig.isSelectionBox"
            type="selection"
            width="55"
            align="center"
        />
        <el-table-column
            v-if="tableConfig.isSerialNumber"
            type="index"
            width="60"
            label="序号"
            align="center"
        />
        <el-table-column
            v-for="item in tableList"
            :key="item.prop"
            v-bind="item"
            :show-overflow-tooltip="true"
        >
            <template v-if="item.slot" #default="scope">
                <slot :name="item.prop" v-bind="scope"></slot>
            </template>
            <template v-else #default="scope">
                <template v-if="Array.isArray(scope.row[item.prop])">
                    <div class="array_p" v-for="i in scope.row[item.prop]" :key="i">
                        {{ i }}
                    </div>
                </template>
                <template v-else>
                    {{ scope.row[item.prop] }}
                </template>
            </template>
        </el-table-column>
        <template #empty>
            <NoData class="empty" v-show="!loading && !tableData.length"></NoData>
        </template>
    </el-table>
    <el-pagination
        v-if="paginationConfig.isPagination"
        v-bind="paginationConfig"
        v-model:current-page="pageNumber"
        v-model:page-size="pageSize"
        :total="total"
        @change="changeNumberAndSize"
    />
</template>
<script lang="ts">
export const tableConfigObj = {
    border: true,
    stripe: false,
    fit: true,
    'show-header': true,
    size: 'default', //large / default /small
    height: '100%',
    isSerialNumber: true,
    isSelectionBox: true,
    headerCellStyle(data: { row: any; column: any; rowIndex: number; columnIndex: number }) {
        return {
            padding: '4px', // 设置Table表头单元内边距
            backgroundColor: '#e7f0ff', // 设置Table表头背景颜色
            borderColor: '#ccc', // 设置Table表头边框颜色
            color: '#000', // 设置Table表头文字颜色
            fontSize: '16px', // 设置Table表头文字大小
            textAlign: 'center', // 设置Table表头文字对齐方式
            fontWeight: 'normal' // 设置Table表头文字粗细
        };
    },
    rowStyle({ row, rowIndex }: { row: any; rowIndex: number }) {
        if (rowIndex % 2 == 0) {
            return {
                backgroundColor: 'rgba(255, 100, 100, 0.3)'
            };
        }
    }
};

export const paginationConfigObj = {
    isPagination: true,
    layout: 'total, sizes, prev, pager, next, jumper', //total, sizes, prev, pager, next, jumper
    'page-sizes': [10, 20, 30, 40],
    small: false,
    disabled: false,
    background: true
};
</script>

<script setup lang="ts">
import { useTable } from 'hooks/useTable';
import { TableOptions, Pagination, TableListItem, TableApi } from 'types/components/Table';
const tableRef = ref();
/**
 * element table + Pagination 二次封装
 */
const props = defineProps({
    tableOptions: {
        type: Object as () => TableOptions,
        default: () => ({})
    },
    paginationOptions: {
        type: Object as () => Pagination
    },
    tableList: {
        type: Array<TableListItem>,
        required: true,
        default: () => [
            // {
            //   label: "名字",
            //   prop: "name",
            //   width: "120",
            // },
        ]
    },
    tableApi: {
        type: Object as () => TableApi,
        required: true,
        default: () => ({
            // api: getTableData1,
            // params: { name: 'afsv' },
            // pageSize: 'pageSize',
            // pageNumber: 'pageNumber',
            // formatResults: (res: any) => {
            //     const { results, totalSum } = res;
            //     return [results, totalSum];
            // }
        })
    }
});
const tableConfig = computed(() => Object.assign({}, tableConfigObj, props.tableOptions));
const paginationConfig = computed(() =>
    Object.assign({}, paginationConfigObj, props.paginationOptions)
);
const { tableData, loading, pageSize, pageNumber, total, changeNumberAndSize, getTableData } =
    useTable(props.tableApi, { isPagination: paginationConfig.value.isPagination });
watch(
    () => props.tableApi.params,
    () => {
        getTableData();
    },
    { deep: true, immediate: true }
);
defineExpose({
    getTableData,
    tableInstance: tableRef
});
</script>
<style lang="scss" scoped>
.el-pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.array_p {
    overflow: auto;
}
.array_p::-webkit-scrollbar {
    display: none;
}
</style>
